<template>
  <el-scrollbar
    ref="majorScroll"
    class="scrollbar-box"
    v-loading="loading"
    v-if="!isMajorDetail"
  >
    <div id="majorLibrary">
      <div class="df curpoin nav-box">
        <div
          class="item-box"
          @click="handleNavClick('1')"
          :class="{ activenav: active === '1' }"
        >
          本科专业
        </div>
        <div
          class="item-box"
          style="margin: 0 15px"
          @click="handleNavClick('2')"
          :class="{ activenav: active === '2' }"
        >
          专科专业
        </div>
        <div
          class="item-box"
          @click="handleNavClick('3')"
          :class="{ activenav: active === '3' }"
        >
          高职本科
        </div>
      </div>
      <majorNav
        :majorsList="majorsList"
        :majorType="majorType"
        @handleNavScorll="handleNavScorll"
        ref="majorNavRef"
      />

      <!-- 列表 -->
      <majorsListTable
        :majorsList="majorsList"
        :majorType="majorType"
        @handleScroll="handleScroll"
        @handleListScroll="handleListScroll"
        @handleOpenDet="handleOpenDet"
        ref="majorsListTableRef"
      />
    </div>
  </el-scrollbar>
  <div v-if="isMajorDetail">
    <!-- 专业详情 -->
    <major-library-det ref="majorDetRef" @changeTab="changeTab" />
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { getAllMajor } from '../../api/appv2/appv2';
import majorNav from '../MajorNav';
import majorsListTable from '../../components/MajorsList';
import MajorLibraryDet from '../MajorLibraryDet';
const emit = defineEmits(['changeTab']);

const changeTab = (data) => {
  emit('changeTab', data);
};
const isMajorDetail = ref(false);
const majorDetRef = ref(null);

const loading = ref(false);
const majorType = ref('');
const majorNavRef = ref(null);
const majorsList = ref([]);
const majorsListTableRef = ref(null);
const majorScroll = ref(null);

const active = ref('1');

const handleScroll = (scroll) => {
  let subtraction = 0;
  if (active.value == 1) {
    subtraction = 100;
  } else if (active.value == 2 || active.value == 3) {
    subtraction = 200;
  }
  majorScroll.value.scrollTo({ top: scroll - subtraction, behavior: 'smooth' });
};

const handleOpenDet = (data, showType) => {
  let type = '';
  if (data.eduLevel == 'ben' || data.eduLevel == '本科') {
    type = 'benke';
  } else if (data.eduLevel == 'zhuan') {
    type = 'zhuanke';
  } else {
    type = 'gaozhibenke';
  }
  isMajorDetail.value = true;
  nextTick(() => {
    majorDetRef.value.handleTreeReq(data, type, true, showType);
  });
};
const handleListScroll = (scroll) => {
  let subtraction = 0;
  if (active.value == 1) {
    subtraction = 100;
  } else if (active.value == 2) {
    subtraction = 200;
  }
  majorScroll.value.scrollTo({ top: scroll - subtraction, behavior: 'smooth' });
};

const handleNavScorll = (index) => {
  majorsListTableRef.value.handleTitleNav(index);
};
const allData = ref({});
const fetchAllMajor = () => {
  loading.value = true;
  getAllMajor()
    .then((res) => {
      if (res.code == 20000) {
        allData.value = res.data;
        if (active.value == 1) {
          majorsList.value = allData.value.majorsBK;
          majorType.value = '1';
        } else if (active.value == 2) {
          majorsList.value = allData.value.majorsZK;
          majorType.value = '2';
        } else {
          majorsList.value = allData.value.majorsGZB;
          majorType.value = '4';
        }
        majorsList.value.allCount = 0;
        majorsList.value.forEach((item) => {
          item.count = 0;
          item.majors.forEach((v) => {
            item.count += v.childCount || 0; // 累加子项的 childCount，如果 childCount 不存在则视为 0
          });
          majorsList.value.allCount += item.count; // 将 item.count 累加到 allCount 上
        });
        loading.value = false;
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

const handleNavClick = (type) => {
  active.value = type;
  if (type == 1) {
    localStorage.setItem('level', 'benke');
  }
  if (active.value == 1) {
    majorsList.value = allData.value.majorsBK;
    majorType.value = '1';
  } else if (active.value == 2) {
    majorsList.value = allData.value.majorsZK;
    majorType.value = '2';
  } else {
    majorsList.value = allData.value.majorsGZB;
    majorType.value = '4';
  }
  majorsList.value.allCount = 0;
  majorsList.value.forEach((item) => {
    item.count = 0;
    item.majors.forEach((v) => {
      item.count += v.childCount || 0; // 累加子项的 childCount，如果 childCount 不存在则视为 0
    });
    majorsList.value.allCount += item.count; // 将 item.count 累加到 allCount 上
  });
};
fetchAllMajor();
defineExpose({
  handleOpenDet,
});
</script>

<style lang="scss" scoped>
.scrollbar-box {
  height: calc(100vh - 155px);
}
.nav-box {
  border-bottom: 1px solid var(--color-text);
  .item-box {
    padding: 10px 30px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}
.activenav {
  color: #409eff;
}
</style>
